<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输出人物信息列表</title>
<style>
body{
font-family:微软雅黑}
.box{ width:300px;
line-height:2.3}
.box span{ display:inline-block;width:56px;font-size:14px;
font-weight:bold; text-align:center
}
.box span:first-child{
width:36px;}

</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<my-list :items="users" odd-bgcolor="#D3DDE6" even-bgcolor="#E5E6F6">
		<template v-slot:default="slotProps">
			<span>{{users[slotProps.index].id}}</span>
            <span>{{users[slotProps.index].name}}</span>
            <span>{{users[slotProps.index].age}}</span>
            <span>{{users[slotProps.index].profession}}</span>
            <span>{{users[slotProps.index].address}}</span>
		</template>
	</my-list>
</div>
<script type="text/javascript">
//注册全局组件
Vue.component('my-list', {
    template: `<div class="box">
		<div>
			<span>编号</span>
            <span>姓名</span>
            <span>年龄</span>
			<span>职业</span>
            <span>地址</span>
		</div>
        <div v-for="(item, index) in items" :style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">
        	<slot :index="index"></slot>
        </div>
      </div>`,
	props: {
        items: Array,
        oddBgcolor: String,
        evenBgcolor: String
    }
})
//创建根实例
var vm = new Vue({
    el: "#example",
	data : {
		users: [//人物信息数组
            {id: 1, name: '张三', age: 20, profession: '演员', address: '北京市'},
            {id: 2, name: '李四', age: 22, profession: '歌手', address: '广州市'},
            {id: 3, name: '王五', age: 23, profession: '画家', address: '沈阳市'},
            {id: 4, name: '赵六', age: 26, profession: '教师', address: '上海市'},
            {id: 5, name: '陈七', age: 25, profession: '导游', address: '长春市'}
        ]
	}
});
</script>


</body>

</html>



